<template>
    <div class="root">
		<div class="bybook">
            <p class="p1"><img :src="item.userPic" alt="">{{item.userName}}</p>
            <p>{{item.content}}</p>
            <p class="p3" v-if="item.pics[0]" >
                <img v-if="item.pics[0].slice(-3)!=='mp4'" :src="item.pics[0]" alt="">
                <video v-if="item.pics[0].slice(-3)=='mp4'" :src="item.pics[0]"></video>
            </p>
            <p class="p4"><span>{{item.readCount}}阅读</span><span>{{item.replyCount}}评论</span></p>
		</div>
    </div>
</template>

<script>

	export default {
        props:["item"],
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		onShow:async function() {

  		},
		methods: {
            off(){
                this.$emit('off')
            },
            getId(id,ind){
                this.$emit('getId',id,ind)
            }
		}
	}
</script>

<style scoped lang=scss>
    .root{
        background-color: #fff;
        width: 100%;
        margin-top: 30rpx;
        .bybook{
            width: 95%;
            margin: 0 auto;
            p{
                padding:20rpx 0;
                display: flex;
                align-items: center;
            }
            .p1>img{
                height: 80rpx;
                width: 80rpx;
                border-radius: 50%;
                margin-left: 10rpx;
            }
            .p3{
                img{
                    border-radius:10rpx;
                    width: 100%;
                }
                video{
                    border-radius:10rpx;
                    width: 100%;
                }
            }
            .p4{
                display: flex;
                justify-content:flex-end;
                span{
                    padding:0 10rpx;
                }
            }
        }
    }
</style>
